<template>
    <div class="fillcontain">
        <el-form :inline="true" ref="form" :model="form" label-width="80px">
            <!-- <el-form-item label="手机号">
                <el-input v-model="form.phone"></el-input>
            </el-form-item> -->
            <el-form-item label="日期">
                <el-date-picker v-model="form.rq" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

            <!-- <el-form-item style="float:right">
                <el-button type="primary" icon="el-icon-plus" @click="onAdd">新增</el-button>
            </el-form-item> -->
        </el-form>

        <div class="table_container">
            <el-table :data="tableData" highlight-current-row style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="支付退回笔数">
                                <span>{{ props.row.zf_ret_count }}</span>
                            </el-form-item>
                            <el-form-item label="支付退回金额">
                                <span>{{ props.row.zf_ret_value }}</span>
                            </el-form-item>
                            <el-form-item label="转赠发起笔数">
                                <span>{{ props.row.zz_fq_count }}</span>
                            </el-form-item>
                            <el-form-item label="转赠赠出金额">
                                <span>{{ props.row.zz_fq_value }}</span>
                            </el-form-item>
                            <el-form-item label="转赠接收笔数">
                                <span>{{ props.row.zz_js_count }}</span>
                            </el-form-item>
                            <el-form-item label="转赠接收金额">
                                <span>{{ props.row.zz_js_value }}</span>
                            </el-form-item>
                            <el-form-item label="转赠关闭笔数">
                                <span>{{ props.row.zz_gb_count }}</span>
                            </el-form-item>
                            <el-form-item label="转赠关闭金额">
                                <span>{{ props.row.zz_gb_value }}</span>
                            </el-form-item>
                            <el-form-item label="转赠冻结金额">
                                <span>{{ props.row.zz_dj_value }}</span>
                            </el-form-item>
                            <el-form-item label="调整笔数">
                                <span>{{ props.row.tz_count }}</span>
                            </el-form-item>
                            <el-form-item label="调整金额">
                                <span>{{ props.row.tz_value }}</span>
                            </el-form-item>
                            <el-form-item label="账户冻结笔数">
                                <span>{{ props.row.dj_count }}</span>
                            </el-form-item>
                            <el-form-item label="账户解冻笔数">
                                <span>{{ props.row.dj_jd_count }}</span>
                            </el-form-item>
                            <el-form-item label="账户冻结/解冻金额">
                                <span>{{ props.row.dj_jd_value }}</span>
                            </el-form-item>
                            <el-form-item label="期末金额">
                                <span>{{ props.row.qm_value }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column type="index" width="100"></el-table-column>
                <el-table-column property="cardunitid" label="发卡机构ID" width="160"></el-table-column>
                <el-table-column property="rq" label="日期" width="160"></el-table-column>
                <el-table-column property="qc_value" label="期初金额" width="160"></el-table-column>
                <el-table-column property="cz_count" label="充值笔数" width="160"></el-table-column>
                <el-table-column property="cz_value" label="充值金额" width="160"></el-table-column>
                <el-table-column property="cz_payvalue" label="实际充值支付金额" width="160"></el-table-column>
                <el-table-column property="zf_count" label="支付笔数" width="160"></el-table-column>
                <el-table-column property="zf_value" label="支付金额" width="160"></el-table-column>
                <el-table-column property="zf_payvalue" label="实际支付金额" width="160"></el-table-column>



            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">

                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="count">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="创建解冻、冻结单" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
            <el-form :model="addform">
                <!-- accountId：储值账户ID
	cardUnitId: 发卡机构ID
	czlx:操作类型 0 冻结  1解冻
	hyId: 会员ID
	reason: 原因
	token: 登录返回的token值 -->
                <el-form-item label="操作类型" :label-width="formLabelWidth">
                    <el-select v-model="addform.czlx" placeholder="请选择活动区域">
                        <el-option label="冻结" value="0"></el-option>
                        <el-option label="解冻" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="储值账户ID" :label-width="formLabelWidth">
                    <el-input v-model="addform.accountId" auto-complete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="发卡机构ID" :label-width="formLabelWidth">
      <el-input v-model="addform.cardUnitId" auto-complete="off"></el-input>
    </el-form-item> -->
                <el-form-item label="会员ID" :label-width="formLabelWidth">
                    <el-input v-model="addform.hyId" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="原因" :label-width="formLabelWidth">
                    <el-input type="textarea" :row="2" v-model="addform.reason" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 132px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>

<script>
import headTop from '../components/headTop'
import { getUserList, getUserCount } from '@/api/getData'
import { dataWay, insertFrozenBill, frozen } from '@/api/getData'
import { getStore } from '@/config/mUtils'
export default {
    data () {
        return {
            form: {
                phone: '',
                cardUnitId: '0'
            },
            unitArr: ['佳惠'],
            czlxArr: ['冻结', '解冻'],
            statusArr: ['保存', '审核'],//状态,// 0--保存，1--审核

            dialogFormVisible: false,
            fullscreenLoading: false,
            addform: {
                accountId: '',
                cardUnitId: '0',
                czlx: '',
                hyId: '',
                reason: '',
                token: '',
            },
            formLabelWidth: '120px',
            tableData: [
                //     {
                //  "id": 单据ID,
                // "djsj": "单据创建时间yyyy-mm-dd hh:mm:ss ",
                // "shsj": “单据审核时间”,
                // "czlx": 操作类型, // 0 冻结  1解冻
                // "reason": "原因",
                // "czrId":创建人ID,
                // "czrName": "创建人名称",
                // "shrId":审核人ID,
                // "shrName": "审核人名称",
                // "status":状态,// 0--保存，1--审核
                // "itemId":单据项目ID,
                // "accountId":储值卡账户ID,
                // "hyId": "会员ID",
                // "hyPhone":  "会员手机号",
                // "hyName": "会员名称",
                // "cardUnitId":发卡机构ID
                // }, 
            ],
            currentRow: null,
            offset: 0,
            limit: 20,
            count: 0,
            currentPage: 1,
        }
    },
    components: {
        headTop,
    },
    created () {
        this.initData();
    },
    methods: {
        async initData () {
            this.QueryRj();
            try {
                // const countData = await getUserCount();
                // if (countData.status == 1) {
                //     this.count = countData.count;
                // }else{
                //     throw new Error('获取数据失败');
                // }
            } catch (err) {
                console.log('获取数据失败', err);
            }
        },
        handleSizeChange (val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange (val) {
            this.currentPage = val;
            this.offset = (val - 1) * this.limit;
            this.getCustomers()
        },
        async QueryRj () {
            const res = await dataWay({
                apiid:'QueryRjQueryRj',
                ksrq: this.form.rq[0],//：开始日期
                jsrq: this.form.rq[1],//：结束日期
                // token: getStore('token')
            });
            console.log(res.retcode);

            if (res.retcode === '00') {
                this.tableData = [];
                this.count = res.data.length;

                res.data.forEach(item => {
                    item.czlx = this.czlxArr[item.cardUnitId]
                    item.status = this.statusArr[item.cardUnitId]
                    this.tableData.push(item)
                })
            }

            if (res.retcode == '06') {
                console.log(2222);

                this.$router.push('/')
            }
            // this.tableData = [];


        },
        //  创建解冻、冻结单
        onAdd () {
            console.log('ddd');
            this.dialogFormVisible = true
            // this.getCustomers()
        },
        onSubmit () {
            console.log('ddd');

            this.QueryRj()
        },
       
       
        addSubmit () {
            console.log('ddd');
            this.dialogFormVisible = false;
            // this.openFullScreen2();
            // this.insertFrozenBill()
        },
        
        
        
    },
}
</script>

<style lang="less">
@import "../style/mixin";
.table_container {
    padding: 20px;
}
</style>
